<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2023-06-01 15:55:50
 * @LastEditTime: 2024-09-05 14:18:34
 * @LastEditors: Dxcr
-->
<template>
    <div class="planePopup_container">
        <div class="map_popup">
            <div class="map_popup_title">
                占压
            </div>
            <div class="map_popup_subTitle">
				<span style="cursor: pointer;" @click="routerpath">占压信息</span>
            </div>
            <div class="map_popup_content">
                经度：{{ data.infoData.lon }}<br />
                纬度：{{ data.infoData.lat }}<br />
                所属单位：{{ data.infoData.deptName }}<br />
                管道名称：{{ data.infoData.ppIdDesc }}<br />
                隐患来源：{{ data.infoData.pitfallSourceDesc }}<br />
                发现时间：{{ detectTime }}<br />
                整改时间：{{ rectificationTime }}
            </div>
        </div>
    </div>
</template>
<script setup>

import {
    defineComponent,
    ref,
    reactive,
    computed,
    toRefs,
    onMounted
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
import mitt from '@/utils/mitt.js';
import dayjs from 'dayjs'

import Router from '@/router';
const props = defineProps({
    info: {
        type: Object,
        default: {}
    }
})

const getRoute = useRoute()
const router = useRouter()
const data = reactive({
    infoData:{}
})
onMounted(() => {
    // setData()
})

const detectTime = computed(() => {
    if(data.infoData.detectTime){
        return dayjs(data.infoData.detectTime).format('YYYY-MM-DD')
    }else{
        return ""
    }
})

const rectificationTime = computed(() => {
    if(data.infoData.rectificationTime){
        return dayjs(data.infoData.rectificationTime).format('YYYY-MM-DD')
    }else{
        return ""
    }
})

async function setData(){
    const req = await getProblermInfoById(props.info.id)
    data.infoData = req.data
}

function routerpath(){
	const url = Router.resolve({
	   path: '/yhpc/index',
	   query:{
		   deptName:data.infoData.deptName,
		   pitfallSource:data.infoData.pitfallSource
	   }
	});
	window.open(url.href);
}


defineExpose({
    setData,
});
</script>
<style lang="scss" scoped>
.planePopup_container {

    //标志物 弹出框
    :deep(.map_popup_title) {
        font-size: 12px !important;
        font-weight: bolder;
        color: rgb(255, 255, 255);
    }

    //标志物 弹出框
    :deep(.map_popup_close) {
        position: absolute;
        right: 4px;
        top: 2px;
    }

    :deep(.map_popup_subTitle) {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.7);
    }

    :deep(.map_popup_content) {
        margin-top: 5px;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 1);
    }

    :deep(.mapboxgl-popup-content) {
        background-color: inherit !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    :deep(.map_popup) {
        border-radius: 0.5rem;
        box-shadow: inset 0px 0px 10px rgb(0 214 220 / 60%);
        padding: 15px 15px 10px 15px;
        background: rgba(5, 47, 66, 0.7);
        border: 1px solid rgba(42, 255, 235, 0.45);
    }

}

:deep {}
</style>